<!--各卡口车辆出入数量及占比-->
<template>
    <div class="carProportion">
        <CommonTitleComponentTitleCategory text="各卡口车辆出入数量及占比"></CommonTitleComponentTitleCategory>
        <div class="carBarClass">
            <div class="carBarImg">
                <img src="@img/kejiyuan.png" alt="" />
                <!-- <p>道闸占比</p> -->
                <div class="chartsViewClass">
                    <chart-view
                        :chart-option="state.leftPieData"
                        :auto-resize="true"
                        height="100%"
                        style="height: 100%"
                    ></chart-view>
                </div>
            </div>
            <div class="fr">
                <CustomSecurityCommonBlockComponent :list="blockList"></CustomSecurityCommonBlockComponent>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { EchartsMethods } from '@/chart/index';

const blockList = ref([
    {
        color: '#27B0F2',
        name: '道闸1',
        val: 50,
        unit: '车次',
        rate: '30'
    },
    {
        color: '#4871F3',
        name: '道闸2',
        val: 50,
        unit: '车次',
        rate: '30'
    },
    {
        color: '#E878FF',
        name: '道闸3',
        val: 50,
        unit: '车次',
        rate: '30'
    },
    {
        color: '#6EE6CB',
        name: '道闸4',
        val: 50,
        unit: '车次',
        rate: '30'
    },
    {
        color: '#E8D968',
        name: '道闸5',
        val: 50,
        unit: '车次',
        rate: '30'
    }
]);
const state = reactive({
    leftPieData: {}
});
onMounted(() => {
    const pieData = [];
    for (let i = 0; i < blockList.value.length; i++) {
        pieData.push({
            value: blockList.value[i].val,
            name: blockList.value[i].name
        });
    }
    state.leftPieData = EchartsMethods.siderLeftPie({ pieData });
});
</script>

<style scoped lang="scss">
@keyframes identifier {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.carProportion {
    height: 26%;
    .carBarClass {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: calc(100% - 30px);
        .fr {
            flex: 1;
            margin-left: 30px;
        }
        .carBarImg {
            width: vw(125);
            height: vw(125);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            .chartsViewClass {
                width: 100%;
                height: 100%;
            }
            > img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                // animation: identifier 13s linear infinite;
            }
        }
    }
}
</style>
